<template>
  <div>
    <el-card>
      <p>
        日统计 &emsp;
        <el-date-picker
          v-model="value1"
          type="date"
          placeholder="选择日期"
          style="width: 200px"
          @change="changeDate"
        ></el-date-picker>
      </p>
      <br />
      <el-row>
        <el-col :span="12">
          <div id="chart1" style="width: 100%; height: 400px"></div
        ></el-col>
        <el-col :span="12"
          ><div id="chart2" style="width: 100%; height: 400px"></div
        ></el-col>
      </el-row>
    </el-card>
    <br />
    <el-card>
      <p>
        月统计 &emsp;
        <el-date-picker
          v-model="value2"
          type="month"
          placeholder="选择月份"
          style="width: 200px"
          @change="changeDate2"
        ></el-date-picker>
      </p>
      <br />
      <el-row>
        <el-col :span="12">
          <div id="chart3" style="width: 100%; height: 400px"></div>
          <br />
          <br />
          <div id="chart4" style="width: 100%; height: 400px"></div>
        </el-col>
        <el-col :span="12">
          <el-row>
            <el-col :span="12">
              <div id="chart5" style="width: 100%; height: 300px"></div>
              <br />
              <div id="chart6" style="width: 100%; height: 300px"></div
            ></el-col>
            <el-col :span="12">
              <div id="chart7" style="width: 100%; height: 300px"></div>
              <br />
              <div id="chart8" style="width: 100%; height: 300px"></div
            ></el-col>
            <br />
            <div id="chart9" style="width: 100%; height: 300px"></div></el-row
        ></el-col>
      </el-row>
    </el-card>
    <br />
    <el-card>
      <p>
        年统计 &emsp;
        <el-date-picker
          v-model="value3"
          type="year"
          placeholder="选择年份"
          style="width: 200px"
          @change="changeDate3"
        ></el-date-picker>
      </p>
      <br />
      <el-row>
        <el-col :span="12">
          <div id="chart10" style="width: 100%; height: 400px"></div>
          <br />
          <br />
          <div id="chart11" style="width: 100%; height: 400px"></div>
        </el-col>
        <el-col :span="12">
          <el-row>
            <el-col :span="12">
              <div id="chart12" style="width: 100%; height: 300px"></div>
              <br />
              <div id="chart13" style="width: 100%; height: 300px"></div
            ></el-col>
            <el-col :span="12">
              <div id="chart14" style="width: 100%; height: 300px"></div>
              <br />
              <div id="chart15" style="width: 100%; height: 300px"></div
            ></el-col>
            <br />
            <div id="chart16" style="width: 100%; height: 300px"></div></el-row
        ></el-col>
      </el-row>
    </el-card>
  </div>
</template>
<script setup>
import { ref, onMounted } from "vue";
import http from "../utils/http";
import * as echarts from "echarts";
import { ElMessage } from "element-plus";

const value1 = ref(new Date(2024, 0, 1));
const value2 = ref(new Date(2024, 0, 1));
const value3 = ref(new Date(2024, 0, 1));
const data1 = ref([]);
const data2 = ref([]);
const data3 = ref({});
const data4 = ref([]);
const data5 = ref({});
var chart1,
  chart2,
  chart3,
  chart4,
  chart5,
  chart6,
  chart7,
  chart8,
  chart9,
  chart10,
  chart11,
  chart12,
  chart13,
  chart14,
  chart15,
  chart16;
const changeDate = (val) => {
  console.log(val);
  //将日期转换为YYYY-MM-DD格式
  const date = new Date(val).toLocaleDateString().replace(/\//g, "-");

  getDayData(date);
};
const getDayData = (date) => {
  http
    .get("/dayData", {
      params: {
        date,
      },
    })
    .then((res) => {
      data1.value = res.data.data;
      console.log(data1.value);
      let typeData = {
        护栏损坏: 0,
        标志损坏: 0,
        标线损坏: 0,
        抛洒物: 0,
        路面病害: 0,
      };
      for (let i in data1.value) {
        if (data1.value[i].damage.indexOf("护栏") !== -1) {
          typeData.护栏损坏 += 1;
        }
        if (data1.value[i].damage.indexOf("标志") !== -1) {
          typeData.标志损坏 += 1;
        }
        if (data1.value[i].damage.indexOf("标线") !== -1) {
          typeData.标线损坏 += 1;
        }
        if (data1.value[i].damage.indexOf("抛洒物") !== -1) {
          typeData.抛洒物 += 1;
        }
        if (data1.value[i].damage.indexOf("路面") !== -1) {
          typeData.路面病害 += 1;
        }
      }

      console.log(typeData);
      data1.value = [
        typeData.护栏损坏,
        typeData.标志损坏,
        typeData.标线损坏,
        typeData.抛洒物,
        typeData.路面病害,
      ];

      drawChart1();
      drawChart2();
    });
};
const changeDate2 = (val) => {
  console.log(val);
  //将日期转换为YYYY-MM格式
  const date = new Date(val).toLocaleDateString().replace(/\//g, "-");
  getMonthData(date);
};
const changeDate3 = (val) => {
  console.log(val);
  //将日期转换为YYYY格式
  const date = new Date(val).toLocaleDateString().replace(/\//g, "-").split("-")[0];
  getYearData(date);
};
const getMonthData = (date) => {
  http
    .get("/monthData", {
      params: {
        date,
      },
    })
    .then((res) => {
      if (!res.data.data) {
        ElMessage.error("暂无数据");
        return;
      }
      console.log(res.data.data);
      let typeData = {
        护栏损坏: 0,
        标志损坏: 0,
        标线损坏: 0,
        抛洒物: 0,
        路面病害: 0,
      };
      for (let i in res.data.data) {
        if (res.data.data[i].damage.indexOf("护栏") !== -1) {
          typeData.护栏损坏 += 1;
        }
        if (res.data.data[i].damage.indexOf("标志") !== -1) {
          typeData.标志损坏 += 1;
        }
        if (res.data.data[i].damage.indexOf("标线") !== -1) {
          typeData.标线损坏 += 1;
        }
        if (res.data.data[i].damage.indexOf("抛洒物") !== -1) {
          typeData.抛洒物 += 1;
        }
        if (res.data.data[i].damage.indexOf("路面") !== -1) {
          typeData.路面病害 += 1;
        }
      }
      console.log(typeData);
      data2.value = [
        typeData.护栏损坏,
        typeData.标志损坏,
        typeData.标线损坏,
        typeData.抛洒物,
        typeData.路面病害,
      ];
      drawChart3();
      drawChart4();
      //日期：数据
      let dateData = {
        1: {
          护栏损坏: 0,
          标志损坏: 0,
          标线损坏: 0,
          抛洒物: 0,
          路面病害: 0,
        },
        //...
      };
      for (let i in res.data.data) {
        let date = new Date(res.data.data[i].time).getDate();
        console.log(date);
        if (!dateData[date]) {
          dateData[date] = {
            护栏损坏: 0,
            标志损坏: 0,
            标线损坏: 0,
            抛洒物: 0,
            路面病害: 0,
          };
        }
        if (res.data.data[i].damage.indexOf("护栏") !== -1) {
          dateData[date].护栏损坏 += 1;
        }
        if (res.data.data[i].damage.indexOf("标志") !== -1) {
          dateData[date].标志损坏 += 1;
        }
        if (res.data.data[i].damage.indexOf("标线") !== -1) {
          dateData[date].标线损坏 += 1;
        }
        if (res.data.data[i].damage.indexOf("抛洒物") !== -1) {
          dateData[date].抛洒物 += 1;
        }
        if (res.data.data[i].damage.indexOf("路面") !== -1) {
          dateData[date].路面病害 += 1;
        }
      }
      console.log(dateData);
      data3.value = dateData;
      drawChart5();
      drawChart6();
      drawChart7();
      drawChart8();
      drawChart9();
    });
};
const getYearData = (date) => {
  http
    .get("/yearData", {
      params: {
        date,
      },
    })
    .then((res) => {
      if (!res.data.data) {
        ElMessage.error("暂无数据");
        return;
      }
      console.log(res.data.data);
      let typeData = {
        护栏损坏: 0,
        标志损坏: 0,
        标线损坏: 0,
        抛洒物: 0,
        路面病害: 0,
      };
      for (let i in res.data.data) {
        if (res.data.data[i].damage.indexOf("护栏") !== -1) {
          typeData.护栏损坏 += 1;
        }
        if (res.data.data[i].damage.indexOf("标志") !== -1) {
          typeData.标志损坏 += 1;
        }
        if (res.data.data[i].damage.indexOf("标线") !== -1) {
          typeData.标线损坏 += 1;
        }
        if (res.data.data[i].damage.indexOf("抛洒物") !== -1) {
          typeData.抛洒物 += 1;
        }
        if (res.data.data[i].damage.indexOf("路面") !== -1) {
          typeData.路面病害 += 1;
        }
      }
      console.log(typeData);
      data4.value = [
        typeData.护栏损坏,
        typeData.标志损坏,
        typeData.标线损坏,
        typeData.抛洒物,
        typeData.路面病害,
      ];
      drawChart10();
      drawChart11();
      //月份：数据
      let dateData = {
        1: {
          护栏损坏: 0,
          标志损坏: 0,
          标线损坏: 0,
          抛洒物: 0,
          路面病害: 0,
        },
        //...
      };
      for (let i in res.data.data) {
        let date = new Date(res.data.data[i].time).getMonth() + 1;
        console.log(date);
        if (!dateData[date]) {
          dateData[date] = {
            护栏损坏: 0,
            标志损坏: 0,
            标线损坏: 0,
            抛洒物: 0,
            路面病害: 0,
          };
        }
        if (res.data.data[i].damage.indexOf("护栏") !== -1) {
          dateData[date].护栏损坏 += 1;
        }
        if (res.data.data[i].damage.indexOf("标志") !== -1) {
          dateData[date].标志损坏 += 1;
        }
        if (res.data.data[i].damage.indexOf("标线") !== -1) {
          dateData[date].标线损坏 += 1;
        }
        if (res.data.data[i].damage.indexOf("抛洒物") !== -1) {
          dateData[date].抛洒物 += 1;
        }
        if (res.data.data[i].damage.indexOf("路面") !== -1) {
          dateData[date].路面病害 += 1;
        }
      }
      console.log(dateData);
      data5.value = dateData;
      drawChart12();
      drawChart13();
      drawChart14();
      drawChart15();
      drawChart16();
    });
};

const drawChart1 = () => {
  if (chart1) {
  } else {
    chart1 = echarts.init(document.getElementById("chart1"));
  }

  let myChart = chart1;
  let option = {
    title: {
      text:
        new Date(value1.value).toLocaleDateString().replace(/\//g, "-") + " 设施损坏类型",
      left: "center",
    },
    tooltip: {
      trigger: "item",
      formatter: "{a} <br/>{b} : {c} ({d}%)",
    },
    legend: {
      data: ["护栏损坏", "标志损坏", "标线损坏", "抛洒物", "路面病害"],
      bottom: -5,
    },

    series: [
      {
        name: "数量",
        type: "pie",
        data: [
          { value: data1.value[0], name: "护栏损坏" },
          { value: data1.value[1], name: "标志损坏" },
          { value: data1.value[2], name: "标线损坏" },
          { value: data1.value[3], name: "抛洒物" },
          { value: data1.value[4], name: "路面病害" },
        ],
      },
    ],
  };

  myChart.setOption(option);
};
const drawChart2 = () => {
  if (chart2) {
  } else {
    chart2 = echarts.init(document.getElementById("chart2"));
  }
  let myChart = chart2;
  let option = {
    title: {
      text:
        new Date(value1.value).toLocaleDateString().replace(/\//g, "-") + " 设施损坏统计",
      left: "center",
    },
    tooltip: {},
    legend: {
      data: ["损坏类型"],
      bottom: -5,
    },
    xAxis: {
      data: ["护栏损坏", "标志损坏", "标线损坏", "抛洒物", "路面病害"],
    },
    yAxis: {},
    series: [
      {
        name: "损坏类型",
        type: "bar",
        data: data1.value,
      },
    ],
  };

  myChart.setOption(option);
};
const drawChart3 = () => {
  if (chart3) {
  } else {
    chart3 = echarts.init(document.getElementById("chart3"));
  }
  let myChart = chart3;

  let option = {
    title: {
      text:
        new Date(value2.value).getYear() -
        100 +
        2000 +
        "年" +
        (new Date(value2.value).getMonth() + 1) +
        "月" +
        " 设施损坏类型",
      left: "center",
    },
    tooltip: {
      trigger: "item",
      formatter: "{a} <br/>{b} : {c} ({d}%)",
    },
    legend: {
      data: ["护栏损坏", "标志损坏", "标线损坏", "抛洒物", "路面病害"],
      bottom: -5,
    },

    series: [
      {
        name: "数量",
        type: "pie",
        data: [
          { value: data2.value[0], name: "护栏损坏" },
          { value: data2.value[1], name: "标志损坏" },
          { value: data2.value[2], name: "标线损坏" },
          { value: data2.value[3], name: "抛洒物" },
          { value: data2.value[4], name: "路面病害" },
        ],
      },
    ],
  };

  myChart.setOption(option);
};
const drawChart4 = () => {
  if (chart4) {
  } else {
    chart4 = echarts.init(document.getElementById("chart4"));
  }
  let myChart = chart4;
  let option = {
    title: {
      text:
        new Date(value2.value).getYear() -
        100 +
        2000 +
        "年" +
        (new Date(value2.value).getMonth() + 1) +
        "月" +
        " 设施损坏统计",
      left: "center",
    },
    tooltip: {},
    legend: {
      data: ["损坏类型"],
      bottom: -5,
    },
    xAxis: {
      data: ["护栏损坏", "标志损坏", "标线损坏", "抛洒物", "路面病害"],
    },
    yAxis: {},
    series: [
      {
        name: "损坏类型",
        type: "bar",
        data: data2.value,
      },
    ],
  };

  myChart.setOption(option);
};
const drawChart5 = () => {
  if (chart5) {
  } else {
    chart5 = echarts.init(document.getElementById("chart5"));
  }
  let myChart = chart5;
  //路面病害 每日折线图
  let option = {
    title: {
      text: "路面病害",
      left: "center",
    },
    tooltip: {
      trigger: "axis",
    },
    legend: {
      data: ["路面病害"],
      bottom: -5,
    },
    xAxis: {
      type: "category",
      data: Object.keys(data3.value).map((item) => item + "日"),
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        name: "路面病害",
        type: "line",
        data: Object.values(data3.value).map((item) => item.路面病害),
      },
    ],
  };
  myChart.setOption(option);
};
const drawChart6 = () => {
  if (chart6) {
  } else {
    chart6 = echarts.init(document.getElementById("chart6"));
  }
  let myChart = chart6;
  //护栏损坏 每日折线图
  let option = {
    title: {
      text: "护栏损坏",
      left: "center",
    },
    tooltip: {
      trigger: "axis",
    },
    legend: {
      data: ["护栏损坏"],
      bottom: -5,
    },
    xAxis: {
      type: "category",
      data: Object.keys(data3.value).map((item) => item + "日"),
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        name: "护栏损坏",
        type: "line",
        data: Object.values(data3.value).map((item) => item.护栏损坏),
      },
    ],
  };
  myChart.setOption(option);
};
const drawChart7 = () => {
  if (chart7) {
  } else {
    chart7 = echarts.init(document.getElementById("chart7"));
  }
  let myChart = chart7;
  //标志损坏 每日折线图
  let option = {
    title: {
      text: "标志损坏",
      left: "center",
    },
    tooltip: {
      trigger: "axis",
    },
    legend: {
      data: ["标志损坏"],
      bottom: -5,
    },
    xAxis: {
      type: "category",
      data: Object.keys(data3.value).map((item) => item + "日"),
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        name: "标志损坏",
        type: "line",
        data: Object.values(data3.value).map((item) => item.标志损坏),
      },
    ],
  };
  myChart.setOption(option);
};
const drawChart8 = () => {
  if (chart8) {
  } else {
    chart8 = echarts.init(document.getElementById("chart8"));
  }
  let myChart = chart8;
  //标线损坏 每日折线图
  let option = {
    title: {
      text: "标线损坏",
      left: "center",
    },
    tooltip: {
      trigger: "axis",
    },
    legend: {
      data: ["标线损坏"],
      bottom: -5,
    },
    xAxis: {
      type: "category",
      data: Object.keys(data3.value).map((item) => item + "日"),
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        name: "标线损坏",
        type: "line",
        data: Object.values(data3.value).map((item) => item.标线损坏),
      },
    ],
  };
  myChart.setOption(option);
};
const drawChart9 = () => {
  if (chart9) {
  } else {
    chart9 = echarts.init(document.getElementById("chart9"));
  }
  let myChart = chart9;
  //抛洒物 每日折线图
  let option = {
    title: {
      text: "抛洒物",
      left: "center",
    },
    tooltip: {
      trigger: "axis",
    },
    legend: {
      data: ["抛洒物"],
      bottom: -5,
    },
    xAxis: {
      type: "category",
      data: Object.keys(data3.value).map((item) => item + "日"),
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        name: "抛洒物",
        type: "line",
        data: Object.values(data3.value).map((item) => item.抛洒物),
      },
    ],
  };
  myChart.setOption(option);
};
const drawChart10 = () => {
  if (chart10) {
  } else {
    chart10 = echarts.init(document.getElementById("chart10"));
  }
  let myChart = chart10;
  let option = {
    title: {
      text: new Date(value3.value).getYear() - 100 + 2000 + "年" + " 设施损坏类型",
      left: "center",
    },
    tooltip: {
      trigger: "item",
      formatter: "{a} <br/>{b} : {c} ({d}%)",
    },
    legend: {
      data: ["护栏损坏", "标志损坏", "标线损坏", "抛洒物", "路面病害"],
      bottom: -5,
    },

    series: [
      {
        name: "数量",
        type: "pie",
        data: [
          { value: data4.value[0], name: "护栏损坏" },
          { value: data4.value[1], name: "标志损坏" },
          { value: data4.value[2], name: "标线损坏" },
          { value: data4.value[3], name: "抛洒物" },
          { value: data4.value[4], name: "路面病害" },
        ],
      },
    ],
  };

  myChart.setOption(option);
};
const drawChart11 = () => {
  if (chart11) {
  } else {
    chart11 = echarts.init(document.getElementById("chart11"));
  }
  let myChart = chart11;
  let option = {
    title: {
      text: new Date(value3.value).getYear() - 100 + 2000 + "年" + " 设施损坏统计",
      left: "center",
    },
    tooltip: {},
    legend: {
      data: ["损坏类型"],
      bottom: -5,
    },
    xAxis: {
      data: ["护栏损坏", "标志损坏", "标线损坏", "抛洒物", "路面病害"],
    },
    yAxis: {},
    series: [
      {
        name: "损坏类型",
        type: "bar",
        data: data4.value,
      },
    ],
  };

  myChart.setOption(option);
};
const drawChart12 = () => {
  if (chart12) {
  } else {
    chart12 = echarts.init(document.getElementById("chart12"));
  }
  let myChart = chart12;
  //路面病害 每月折线图
  let option = {
    title: {
      text: "路面病害",
      left: "center",
    },
    tooltip: {
      trigger: "axis",
    },
    legend: {
      data: ["路面病害"],
      bottom: -5,
    },
    xAxis: {
      type: "category",
      data: Object.keys(data5.value).map((item) => item + "月"),
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        name: "路面病害",
        type: "line",
        data: Object.values(data5.value).map((item) => item.路面病害),
      },
    ],
  };
  myChart.setOption(option);
};
const drawChart13 = () => {
  if (chart13) {
  } else {
    chart13 = echarts.init(document.getElementById("chart13"));
  }
  let myChart = chart13;
  //护栏损坏 每月折线图
  let option = {
    title: {
      text: "护栏损坏",
      left: "center",
    },
    tooltip: {
      trigger: "axis",
    },
    legend: {
      data: ["护栏损坏"],
      bottom: -5,
    },
    xAxis: {
      type: "category",
      data: Object.keys(data5.value).map((item) => item + "月"),
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        name: "护栏损坏",
        type: "line",
        data: Object.values(data5.value).map((item) => item.护栏损坏),
      },
    ],
  };
  myChart.setOption(option);
};
const drawChart14 = () => {
  if (chart14) {
  } else {
    chart14 = echarts.init(document.getElementById("chart14"));
  }
  let myChart = chart14;
  //标志损坏 每月折线图
  let option = {
    title: {
      text: "标志损坏",
      left: "center",
    },
    tooltip: {
      trigger: "axis",
    },
    legend: {
      data: ["标志损坏"],
      bottom: -5,
    },
    xAxis: {
      type: "category",
      data: Object.keys(data5.value).map((item) => item + "月"),
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        name: "标志损坏",
        type: "line",
        data: Object.values(data5.value).map((item) => item.标志损坏),
      },
    ],
  };
  myChart.setOption(option);
};
const drawChart15 = () => {
  if (chart15) {
  } else {
    chart15 = echarts.init(document.getElementById("chart15"));
  }
  let myChart = chart15;
  //标线损坏 每月折线图
  let option = {
    title: {
      text: "标线损坏",
      left: "center",
    },
    tooltip: {
      trigger: "axis",
    },
    legend: {
      data: ["标线损坏"],
      bottom: -5,
    },
    xAxis: {
      type: "category",
      data: Object.keys(data5.value).map((item) => item + "月"),
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        name: "标线损坏",
        type: "line",
        data: Object.values(data5.value).map((item) => item.标线损坏),
      },
    ],
  };
  myChart.setOption(option);
};
const drawChart16 = () => {
  if (chart16) {
  } else {
    chart16 = echarts.init(document.getElementById("chart16"));
  }
  let myChart = chart16;
  //抛洒物 每月折线图
  let option = {
    title: {
      text: "抛洒物",
      left: "center",
    },
    tooltip: {
      trigger: "axis",
    },
    legend: {
      data: ["抛洒物"],
      bottom: -5,
    },
    xAxis: {
      type: "category",
      data: Object.keys(data5.value).map((item) => item + "月"),
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        name: "抛洒物",
        type: "line",
        data: Object.values(data5.value).map((item) => item.抛洒物),
      },
    ],
  };
  myChart.setOption(option);
};

onMounted(() => {
  getDayData("2024-01-01");
  getMonthData("2024-01");
  getYearData("2024");
});
</script>
